<template>
  <div class="app-container" >
    <!--main search body-->
        <el-row type="flex" justify="center">
          <el-input placeholder="请输入内容" v-model="queryParams.content">
              <template slot="prepend">
                <el-select
                   v-model="queryParams.type"
                   class="add-prds-select"
                   placeholder="请选择">
                    <el-option
                      v-for="item in selectOptions"
                      :key="item.code"
                      :label="item.name"
                      :value="item.code">
                    </el-option>
                  </el-select>
              </template>
            </el-input>
        </el-row>
        <div class="search-button">
            <el-button type="primary" icon="el-icon-search" size="mini" @click="confrimSearch">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini"  @click="resetSearch">重置</el-button>
        </div>

      <!-- main list body -->
      <el-table v-loading="bannerLoding" :data="bannerList" >
          <el-table-column label="粉丝ID" align="center" prop="id" :show-overflow-tooltip="true" width="280"/>
          <el-table-column label="粉丝用户名" align="center" prop="username"/>
          <el-table-column label="粉丝头像" align="center">
            <template slot-scope="scope">
              <span v-if="!scope.row.avatar"></span>
              <el-image
                v-else
                style="width: 50px; height: 50px"
                :src="scope.row.avatar"
                />
            </template>
          </el-table-column>

          <el-table-column label="注册时间" align="center">
            <template slot-scope="scope">
              <span>{{dateFormat('YYYY-mm-dd HH:MM',scope.row.register_time)}}</span>
            </template>
          </el-table-column>


          <el-table-column label="等级" align="center" >
            <template slot-scope="scope">
              <span>{{ scope.row.depthI}}</span>
            </template>
          </el-table-column>
      </el-table>

      <el-dialog :visible.sync="userDialog" title="用户列表"  width="900px" append-to-body>
        <el-table :data="userList"  highlight-current-row @current-change="handleCurrentChange">
          <el-table-column  align="center" >
            <template slot-scope="scope">
                <!-- <el-radio v-model="currentRow.id" :label="scope.row.id"></el-radio> -->
                <span :class="currentRow&&currentRow.id == scope.row.id ? 'active' : 'on-active' "></span>
            </template>
          </el-table-column>
          <el-table-column label="用户ID" align="center" prop="id" width="280" :show-overflow-tooltip="true" />
            <el-table-column label="用户名称" align="center" prop="username" />
            <el-table-column label="用户头像" align="center">
              <template slot-scope="scope">
                <el-image
                  style="width: 50px; height: 50px"
                  :src="scope.row.avatar"
                  />
              </template>
            </el-table-column>
            <el-table-column label="注册时间" align="center" width="180">
              <template slot-scope="scope">
                <span>{{dateFormat('YYYY-mm-dd HH:MM',scope.row.register_time)}}</span>
              </template>
            </el-table-column>
        </el-table>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="confirmDialog">确 定</el-button>
          <el-button @click='cancleDialog'>取 消</el-button>
        </div>
      </el-dialog>

  </div>
</template>

<script>
import { listUser } from "@/api/system/user";
import {
   queryFansList,
   queryFansListByName
  } from "@/api/mall/index";
import { getToken } from "@/utils/auth";

export default {
  name: "Mall",
  components: {

  },
  data() {
    return {
      currentRow: {},
      userDialog:false,
      userList:[],
      selectOptions:[{
        code: "id",
        name: "按用户ID"
      },{
        code: "name",
        name: "按用户名"
      }],

      bannerList:[], //banner 列表
      bannerLoding:false,
      queryParams:{
        type:"id",
        content:"",
      },
      //商品分类字典
      prdsClassification:[
        "生活用品",
        "食品",
        "其他"
      ],
      //状态字典
      statusCode:[
        {
          name:"已上架",
          code:1
        },
        {
          name:"已下架",
          code:0
        },
      ],

      codeNumber:1,
      //新增banner
      totalCount:0, //搜索的返回数量
      addDailog:false, //添加弹出框
      dialogPrdsTypes:[
        {name:"商品编号",code:"number"},
        {name:"商品标题",code:"title"},
      ],  //搜索类型
      dialogSearchParms:{
        type:"number",
        content:"",
        pageIndex:1,
        pageSize:10,
      }, //搜索参数
      dialogList:[],
      dialogLoading:false,
      dailogSelected:[],


      // 遮罩层
      loading: true,

      prdsList:[],

      total:0,

      codeDialog:false,
      skuId:"",
      prdsCollention:[]
    };
  },
  watch: {

  },
  created() {

  },
  methods: {
    cancleDialog(){
      this.currentRow = {};
      this.userDialog = false;
    },
    confirmDialog(){
      const userId = this.currentRow?this.currentRow.id:"";
      if(!userId){
        this.$message("请选择用户");
        return;
      }
      this.getList(userId)
      this.userDialog = false
    },
    handleCurrentChange(val) {
        this.currentRow = val;
    },
    resetSearch(){
        this.queryParams={type: "id",content: ""}
    },
    confrimSearch(){
      const type = this.queryParams.type;
      if(type==="id"){
        //根据id搜索
        const userId = this.queryParams.content.trim();
        this.getList(userId)
      }else{
        this.queryFansListByName()
      }
    },

    dateFormat(fmt, date) {
        let ret="";
        date=new Date(date);
        const opt = {
          'Y+': date.getFullYear().toString(), // 年
          'm+': (date.getMonth() + 1).toString(), // 月
          'd+': date.getDate().toString(), // 日
          'H+': date.getHours().toString(), // 时
          'M+': date.getMinutes().toString(), // 分
          'S+': date.getSeconds().toString() // 秒
          // 有其他格式化字符需求可以继续添加，必须转化成字符串
        }
        for (let k in opt) {
          ret = new RegExp('(' + k + ')').exec(fmt)
          if (ret) {
            fmt = fmt.replace(
              ret[1],
              ret[1].length == 1 ? opt[k] : opt[k].padStart(ret[1].length, '0')
            )
          }
        }
        return fmt
    },
    /**
     * 根据用户ID搜索
     */
    getList(id) {
      this.bannerLoding = true;
      if(!id){
        this.$message("用户ID不能为空");
        this.bannerLoding = false;
        return
      }
      const queryParams = {
        userId:id
      }
      queryFansList(queryParams).then(response => {
          this.bannerLoding = false;
          if(response.code==200){
            let rows = response.data || []
            this.$message({message:`查询数据${rows.length}条`,type: 'success'});
            let bannerList = rows
            this.bannerList = bannerList
          }else{
            this.$message("数据获取失败");
          }
        }
      );
    },

    //用户名查询
    queryFansListByName(){
        this.userList = [];
        this.currentRow={};
        const keyword = this.queryParams.content.trim();
        const params = {
          keyword:keyword,
        }
        queryFansListByName(params).then(resp => {
            let userList = resp.data||[];
            if(userList.length==0){
              this.$message("未查询到相关用户");
            }else{
              this.userDialog = true;
              this.userList = userList
            }
        })
    }
  }
};
</script>

<style scoped>
  .search-button{
    display:flex;
    justify-content: center;
    margin-bottom: 10px;
  }
  .add-options{
    display: flex;
    justify-content: flex-end;
    margin-bottom: 10px;
    margin-right: 10px;
  }
  /* .el-input input{border:none;} */
  .add-prds-select{
    width: 120px
  }
  .search-button{
    display:flex;
    justify-content: center;
    margin-bottom: 20px;
    margin-top: 20px;
  }
  .add-options{
    display: flex;
    justify-content: flex-end;
    margin-bottom: 10px;
    margin-right: 10px;
  }
  .el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
  }
  .on-active{
    display: block;
    width: 15px;
    height: 15px;
    border:2px solid #999
  }
  .active{
    display: block;
    width: 15px;
    height: 15px;
    background: #2593fc
  }
</style>
